import * as opreate from 'api/getData'

const mixins ={
  mixin:{
    data() {
      return {
        country:'全部',
        province:'全部',
        provinceList:'',
        city:'全部',
        cityLists:'',
        shop:'全部',
        shopLists:'',
        salePointChart:'',
        area:[],
        pid:'',
        fid:''
      }
    },
    mounted(){
    },
    methods:{
      channelSel(searchData){
        searchData = typeof searchData == 'object' ? searchData : { num: searchData || 12 }
        this.getProvincePro(this.pid,2)
        this.channelPrice(this.pid, this.fid, searchData)
      },
      channelDetail(channelName, productCode, searchData, region = '全部', province = '全部', city = '全部'){
        opreate.channelTerminal({ ...searchData, productCode, channelName, region, province, city }).then(res => {
          this.priceTableData = res.data || []
        })
      },
      channelTrend(channel, productCode, cid, searchData, region = '全部', province = '全部', city = '全部'){
        if(channel){
          opreate.channelSalesLine({ ...searchData, productCode, channel, region, province, city }).then(res => {
            if(res.code == '200'){
              this.priceChartData = res.data || []
              let priceChart = this.$echarts.init(document.getElementById('salePriceChart'+cid));
              let priceChartOption = {
                legend: {
                  data:['销量']
                },
                xAxis: {
                  data: this.priceChartData.map(item => item.dateTime)
                },
                tooltip:{
                  show:true,
                  trigger: 'axis'
                },
                yAxis: [{
                  name: '销售量（万件）',
                  type: 'value'
                }, {
                  name: '销售额（万元）',
                  type: 'value'
                }],
                series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: this.priceChartData.map(item => (item.salesCount/10000).toFixed(2))
                }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: this.priceChartData.map(item => (item.salesAmount).toFixed(2))
                }]
              };
              priceChart.setOption(priceChartOption);
            }else {
              this.$message.error('查询出错，请稍后再试')
            }
          })
        }
      },
      fetchData(productCode, cid, searchData = 12 ) {
        this.pid = productCode
        searchData = typeof searchData == 'object' ? searchData : { num: searchData || 12 }
        this.channelPrice(productCode,cid, searchData)
        this.fid = cid
        opreate.salesDetailTrend({ productCode, ...searchData }).then(res => {
          this.saleInfo = res.data || []
          let myChart = this.$echarts.init(document.getElementById('saleDetailSummaryChart'+cid));
          myChart.clear()
          let option = {
            legend: {
              data:['销售额','销售量'],
              right:'20'
            },
            tooltip:{
              show:true,
              trigger: 'axis',
            },
            xAxis: {
              data: this.saleInfo.map(item => item.dateTime)
            },
            yAxis: [{
              name: '销售量（万件）',
              type: 'value'
            }, {
              name: '销售额（万元）',
              type: 'value'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            series: [{
              name: '销售量',
              type: 'line',
              yAxisIndex: 0,
              smooth:true,
              itemStyle: {
                color: '#B0ACEC'
              },
              data: this.saleInfo.map(item => (item.salesCount/10000).toFixed(2))
            }, {
              name: '销售额',
              type: 'line',
              smooth:true,
              itemStyle: {
                color: '#9DD6F9'
              },
              yAxisIndex: 1,
              data: this.saleInfo.map(item => (item.salesAmount/10000).toFixed(2))
            }]
          };
          myChart.setOption(option);
       })
        this.priceTableData = []
        this.priceChartData = []
        this.channelTrend('', productCode, cid, searchData)
        this.allChannelRegion(productCode, 1)
     },
      channelPrice(productCode, cid, searchData){
        opreate.getChannelSelectGroup({
          ...searchData,
          productCode,
          flag: 0,
          region: this.country == '全部'? '':this.country,
          province: this.province == '全部'? '':this.province,
          city: this.city == '全部'? '':this.city,
          shopName: this.shop == '全部'? '':this.shop
        }).then(res => {
          this.salePointChart = res.data || []
          let charts = this.$echarts.init(document.getElementById('salePointChart'+cid))
          charts.clear();
          let option = {
            color: ['#51c6ea'],
            tooltip : {
              trigger: 'axis'
            },
            legend: {
              data:['销售量','销售额'],
              right:'20'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : this.salePointChart.map(item => item.channelName),
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [{
              name: '销售量（万件）',
              type: 'value'
            }, {
              name: '销售额（万元）',
              type: 'value'
            }],
            series : [
              {
                name: '销售额',
                type: 'line',
                yAxisIndex: 0,
                smooth:true,
                itemStyle: {
                  color: '#8c85dd'
                },
                data:this.salePointChart.map(item => (item.salesAmount/10000).toFixed(2))
              },
              {
                name:'销售量',
                type:'bar',
                yAxisIndex: 1,
                barMaxWidth: '25px',
                data:this.salePointChart.map(item => (item.salesCount/10000).toFixed(2))
              }
            ]
          };
          charts.setOption(option);
          charts.off('click');
          charts.on('click', params => {
            if(this.shopIsAll){
              this.channelDetail(params.name, productCode, searchData,this.country, this.province, this.city)
              this.channelTrend(params.name, productCode, cid, searchData,this.country, this.province, this.city)
            }
          });
        })
      },
      allChannelRegion(productCode,flag){  /* 地区 */
        let param = { productCode, flag: flag }
        opreate.getShopListSale(param).then(res => {
          this.area = ['全部', ...res.data]
        })
        this.getProvincePro(productCode,2)
      },
      getProvincePro(productCode,flag){ /* 省份 */
        opreate.getShopListSale({ productCode, flag, region:this.country}).then(res => {
          this.provinceList = [ '全部', ...res.data ]
        })
        this.getCityPro(productCode,3)
     },
      getCityPro(productCode,flag){  /* 城市 */
       opreate.getShopListSale({productCode, flag, region:this.country, province:this.province }).then(res => {
         this.cityLists = [ '全部', ...res.data ]
       })
       this.getShopPro(productCode,4)
     },
      getShopPro(productCode,flag){  /* 店铺 */
        opreate.getShopListSale({productCode, flag, region:this.country, province:this.province, city:this.city}).then(res => {
         this.shopLists = [ '全部', ...res.data ]
        })
     }
   }
  },
  saleChart:{
    data(){
      return{
         myChart:'',
         sale:0,
         mainchart:'',
         productBoxs:false,
         proName:'',
         proCode:''
      }
    },
    methods:{
      saleA(){
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter:(param) => {
              let total = param[0].data+param[2].data
              let actual = param[0].data+param[1].data
              let tip =param[0].axisValue+'<br />'+'实际销额:'+actual+'<br />'+'计划销额:'+total+'<br />'+'月环比:'+param[3].data+'%'
              return tip
            }
          },
          legend: {
            data:['销额超出计划','销额环比','销额低于计划','实际销额'],
            right:20
          },
          xAxis: [
            {
              type: 'category',
              data: this.mainchart.map(item => item.dateTime)
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '销售额',
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '环比',
              axisLabel: {
                formatter: '{value}% '
              }
            }
          ],
          series: [
            {
              name:'实际销额',
              type:'bar',
              itemStyle: {
                color: '#aa94dc'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.actualSalesAmount-item.salesAmountHigherThanPlanData)
            },
            {
              name:'销额超出计划',
              type:'bar',
              itemStyle: {
                color: '#ee87a7'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.salesAmountHigherThanPlanData==null? 0:item.salesAmountHigherThanPlanData)
            },
            {
              name:'销额低于计划',
              type:'bar',
              itemStyle: {
                color: '#64bef5'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.salesAmountLowerThanPlannData==null? 0:item.salesAmountLowerThanPlannData)
            },
            {
              name:'销额环比',
              type:'line',
              smooth: true,
              yAxisIndex: 1,
              itemStyle: {
                color: '#64bef5'
              },
              barMaxWidth: '25px',
              data:this.mainchart.map(item => item.actualSalesAmountRingRatio)
            }
          ]
        };
        this.myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
      },
      saleC(){
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter:(param) => {
              let total = param[0].data+param[2].data
              let actual = param[0].data+param[1].data
              let tip =param[0].axisValue+'<br />'+'实际销额:'+actual+'<br />'+'计划销额:'+total+'<br />'+'月环比:'+param[3].data+'%'
              return tip
            }
          },
          legend: {
            data:['销量超出计划','销量环比','销量低于计划','实际销量'],
            right:20
          },
          xAxis: [
            {
              type: 'category',
              data: this.mainchart.map(item => item.dateTime)
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '销售量',
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '环比',
              axisLabel: {
                formatter: '{value}% '
              }
            }
          ],
          series: [
            {
              name:'实际销量',
              type:'bar',
              itemStyle: {
                color: '#aa94dc'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.actualSalesCount-item.salesCountHigherThanPlanData)
            },
            {
              name:'销量超出计划',
              type:'bar',
              itemStyle: {
                color: '#ee87a7'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.salesCountHigherThanPlanData==null? 0:item.salesCountHigherThanPlanData)
            },
            {
              name:'销量低于计划',
              type:'bar',
              itemStyle: {
                color: '#64bef5'
              },
              barMaxWidth: '25px',
              stack:'ss',
              data:this.mainchart.map(item => item.salesCountLowerThanPlannData==null? 0:item.salesCountLowerThanPlannData)
            },
            {
              name:'销量环比',
              type:'line',
              smooth: true,
              yAxisIndex: 1,
              itemStyle: {
                color: '#64bef5'
              },
              data:this.mainchart.map(item => item.actualSalesCountRingRatio)
            }
          ]
        };
        this.myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
      },
      saleSelect(){
        '0' == this.sale ? this.saleA() : this.saleC()
      },
      checkCharts(productCode,dateTime){
        this.proName = productCode + "  " + dateTime + "销售计划"
        this.proCode = productCode
        opreate.getSaleMonthData({
          productCode: productCode == '' ? undefined : productCode,
          dateTime: dateTime
        }).then(res => {
          this.myChart = this.$echarts.init(document.getElementById('saleSummaryChartss'));
          let [ mainChart = [] ] =  res.data || []
          this.mainchart = mainChart || []
          this.saleA()
        })
      }
    }
  }
}
export default mixins
